<template>
    <div class="shopping">
        <h1>购物车</h1>

        <ul class="custom-list">
            <li v-for="(item, index) in cart" :key="index">
                {{ item.name }} - ￥{{ item.price }} - 数量：{{ item.count }}
                <button @click="increment(index)">+</button>
                <button @click="decrement(index)">-</button>
                <button @click="incrementAsync(index)">+异步</button>
                <button @click="decrementAsync(index)">-异步</button>
                <button @click="deleteItem(index)">删除</button>
            </li>
        </ul>

        <form @submit.prevent="addItem">
            <label for="itemName">商品名称：</label>
            <input type="text" id="itemName" v-model="newItem.name" required>
            <label for="itemPrice">商品价格：</label>
            <input type="number" id="itemPrice" v-model.number="newItem.price" required>
            <label for="itemCount">商品数量：</label>
            <input type="number" id="itemCount" v-model.number="newItem.count" required>
            <button type="submit">添加商品</button>
        </form>
        <p>总价：{{ totalPrice }}</p>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
    name: 'ShoppingView',
    data() {
        return {
            newItem: {
                name: '',
                price: 0,
                count: 0
            }
        };
    },
    computed: {
        //将state中的数据映射到组件中
        ...mapState(['cart']),
        //将totalPrice映射到组件中
        ...mapGetters(['totalPrice'])
    },
    methods: {
        //将increment和decrement映射到组件中
        ...mapMutations(["increment", "decrement"]),
        //将incrementAsync和decrementAsync映射到组件中
        //异步处理但是需要mutations才能就行间接操作
        ...mapActions(["incrementAsync", "decrementAsync"]),

        increment(index) {
            //调用increment方法
            this.$store.commit('increment', index);
        },
        decrement(index) {
            //调用decrement方法
            this.$store.commit('decrement', index);
        },
        incrementAsync(index) {
            //调用incrementAsync方法
            this.$store.dispatch('incrementAsync', index);
        },
        decrementAsync(index) {
            //调用decrementAsync方法
            this.$store.dispatch('decrementAsync', index);
        },
        //添加一个商品
        //一、使用了dispathch方法；dispatch方法会触发一个action，然后action会调用一个mutation来更新state,因为直接触发了action所以不需要映射
        //二、如果需要使得代码更加清晰，在...mapActions中添加addItem以此将addItem方法映射到组件中，将dispathch方法替换为commit方法

        //两者的区别在于：dispatch方法会触发一个action，然后action会调用一个mutation来更新state,用于异步操作
        //而commit方法会直接调用一个mutation来更新state
        addItem() {
            this.$store.dispatch('addNewItem', this.newItem);
            this.newItem = { name: '', price: '', count: 1 }; // 清空表单数据
        },
        //删除一个商品
        deleteItem(index) {
            this.$store.commit('deleteItem', index);
        },
    }
}
</script>
<style>
.custom-list {
    list-style-type: none;
}
</style>